<template>
  <div class="plate-grid">
    <div class="plate-item" v-for="item in plateData" :key="item.name">
      <p class="title">{{ item.name }}</p>
      <p class="value font-26">{{ item.value }}T KRW</p>
      <p class="change font-26" :class="{'up': item.change >= 0, 'down': item.change < 0}">
        {{ item.change >= 0 ? '+' : '' }}{{ item.change }}%
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Plate',
  props: {
    plateData: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.plate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem;

  .plate-item {
    background: #1C1C1E;
    border-radius: 0.875rem;
    padding: 2rem;
    text-align: center;
    min-height: 13rem;

    .title {
      color: #fff;

      font-weight: 500;
      margin-bottom: 4rem;
    }

    .value {
      color: #2abc5a;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .change {
      font-weight: 500;

      &.up {
        color: #2abc5a;
      }

      &.down {
        color: #c7697f;
      }
    }
  }
}
</style>
